<template>
  <!-- <TemplateTitle titleName="四厂日均水量对比"></TemplateTitle> -->
  <div class="title-special">{{ dataObj.year }}年生产经营实时统计分析</div>
  <div class="static-box">
    <div class="static-item">
      <div class="item-title">当月实际完成水量</div>
      <div class="numb">
        <span class="count">{{ dataObj.completeOfMonth }}</span>
        <span class="unit"> 万吨</span>
        <img
          src="../../assets/images/6.png"
          alt=""
          v-if="dataObj.completeToLastMonth && dataObj.completeToLastMonth > 0"
        />
        <img
          src="../../assets/images/7.png"
          class="down"
          alt=""
          v-if="dataObj.completeToLastMonth && dataObj.completeToLastMonth < 0"
        />
        <span class="rate" v-if="dataObj.completeToLastMonth">
          {{ dataObj.completeToLastMonth }}%</span
        >
      </div>
    </div>
    <div class="static-item">
      <div class="item-title">当月实际日均</div>
      <div class="numb">
        <span class="count">{{ dataObj.dailyAvgOfMonth }}</span>
        <span class="unit"> 万吨</span>
        <img
          src="../../assets/images/6.png"
          alt=""
          v-if="dataObj.dailyAvgToLastMonth && dataObj.dailyAvgToLastMonth > 0"
        />
        <img
          src="../../assets/images/7.png"
          class="down"
          alt=""
          v-if="dataObj.dailyAvgToLastMonth && dataObj.dailyAvgToLastMonth < 0"
        />
        <span class="rate" v-if="dataObj.dailyAvgToLastMonth">
          {{ dataObj.dailyAvgToLastMonth }}%</span
        >
      </div>
    </div>
    <div class="static-item">
      <div class="item-title">当月完成率(水务目标)</div>
      <div class="numb">
        <span class="count">{{ dataObj.scaleOfMonth }}</span>
        <span class="unit"> %</span>
        <img
          src="../../assets/images/6.png"
          alt=""
          v-if="dataObj.scaleToLastMonth && dataObj.scaleToLastMonth > 0"
        />
        <img
          src="../../assets/images/7.png"
          class="down"
          alt=""
          v-if="dataObj.scaleToLastMonth && dataObj.scaleToLastMonth < 0"
        />
        <span class="rate" v-if="dataObj.scaleToLastMonth">
          {{ dataObj.scaleToLastMonth }}%</span
        >
      </div>
    </div>
  </div>
</template>

<script setup>
// import TemplateTitle from "@/components/common/templateTitle.vue"
import homeHttp from "@/https/home.js";
import moment from "moment";
import { onMounted, ref, watch, inject } from "vue";

let dataObj = ref({});
onMounted(() => {
  queryAchievedOfYear(moment().format("YYYY"));
});
const year = inject("currentDataYear");
watch(year, (val) => {
  console.log(val, "val");
  queryAchievedOfYear(val);
});
const queryAchievedOfYear = (year) => {
  let params = {
    year: year,
  };
  homeHttp.queryAchievedOfYear(params).then((res) => {
    if (res.data.code == 200) {
      res.data.data.scaleOfMonth = (
        (res.data.data.scaleOfMonth * 10) /
        10
      ).toFixed(1);
      dataObj.value = res.data.data;
    }
  });
};
</script>

<style scoped lang="less">
.static-box {
  display: flex;
  flex-direction: row;
  justify-content: space-between;

  .static-item {
    width: 230rem;
    height: 89rem;
    background: url("../../assets/images/staticItemBg.png") no-repeat right
      bottom;
    background-size: 230rem 89rem;
    margin-bottom: 20rem;
    box-sizing: border-box;

    .item-title {
      font-size: 16rem;
      font-weight: bold;
      line-height: 1.6;
      color: #7190b6;
      margin-bottom: 10rem;
    }

    .numb {
      color: #6c798b;
      font-weight: bold;
      font-size: 12rem;

      .count {
        font-size: 24rem;
      }

      .unit {
        font-size: 18rem;
      }

      img {
        width: 10rem;
        height: 8rem;
        margin-left: 10rem;
        margin-right: 4rem;
      }

      .down {
        transform: rotate(180deg);
      }

      .rate {
        font-size: 12rem;
        color: #369eff;
      }
    }
  }
}
</style>
